<template>
  <div>
    <mall-index></mall-index>
    <div class="ferter" v-if="!user.roles.includes('biz_supplier_admin')">
      <el-card>
        <div class="bz">近30天每日订单数</div>
        <div id="main" style="width: 100%; height: 350px"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import MallIndex from "./components/mallIndex.vue";
import { showWeekOrderNum } from "@/api/mallIndex.js";
export default {
  mounted() {
    this.getArr();
  },
  components: {
    MallIndex,
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
  },
  methods: {
    async getArr() {
      const weekNum = await this.getWeekOrderNum();
      console.log(weekNum);
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: weekNum.nearlyMonthDates,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: weekNum.data,
            type: "line",
          },
        ],
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var result = "";
            for (var i = 0; i < params.length; i++) {
              result += params[i].name + "<br />";
              result += "订单个数: " + params[i].value + "<br />";
            }
            return result;
          },
        },
      };

      option && myChart.setOption(option);
    },
    async getWeekOrderNum() {
      return new Promise((resolve, reject) => {
        showWeekOrderNum()
          .then((res) => {
            resolve(res.data);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.ferter {
  margin: 0 20px;
  padding-bottom: 10px;
}
</style>
